<template>
  <div class="goods">
    <RouterLink :to="{ name: 'gooddetail', params: { id: good.id } }" class="link">
      <div class="card">
        <el-image class="img" :src="file" fit="contain" />
        <div class="good-info">
          <el-text class="mx-1" size="small" style="color: #000">{{ good.name }}</el-text>
          <el-text class="mx-1" size="small" truncated>
            {{ good.description }}
          </el-text>
          <el-text class="mx-1">
            <span class="text-style">￥{{ decimalPointSave(good.price) }}</span>
            &nbsp;
            <span class="text-style">∫{{ good.integral }}</span>
          </el-text>
          <div class="tags">
            <el-tag size="small" v-for="item in good.tags" style="margin-left: 5px">
              {{ item }}
            </el-tag>
          </div>
        </div>
      </div>
    </RouterLink>
  </div>
</template>

<script setup>
import { decimalPointSave } from '@/utils/strutils'
import { getFile } from '@/utils/fileutils'
import { ref, onMounted } from 'vue'

const props = defineProps({
  obj: Object,
})

// 商品详细信息
const good = props.obj

// 文件信息
const file = ref()

// 获取图片对于的base64编码
onMounted(async () => {
  file.value = await getFile(good.image)
})
</script>

<style scoped less="scss">
.goods {
  display: inline-block;

  width: 200px;
  margin: 20px;
  cursor: pointer;
  transition: all 0.5s;
  background-color: white;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);

  .card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    max-width: 400px;

    .img {
      min-width: 60%;
      height: 180px;
      margin: 5px;
    }

    .good-info {
      display: flex;
      gap: 10px;
      flex-direction: column;
      align-items: center;

      width: 100%;
      box-sizing: border-box;
      margin-top: 10px;

      .mx-1 {
        transition: color 0.3s; /* 添加颜色渐变效果 */

        white-space: wrap;
        overflow: hidden; /* 确保内容超出时不显示出来 */
        text-overflow: ellipsis; /* 显示省略号 */
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 限制为两行 */
        -webkit-box-orient: vertical; /* 垂直方向 */

        .text-style {
          font-size: 14px;
          font-weight: 500;
        }
      }
    }

    .tags {
      display: flex;
      margin-bottom: 3px;
    }
  }
}

.goods:hover {
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}
</style>
